<script setup>
import {ref,onMounted} from 'vue'
import easyapi from '../api'
import { ElMessage, ElMessageBox, roleTypes } from 'element-plus'
//定义绑定的数据
const tableData=ref([]);
//控制新增窗口是否显示
const addWinVisible=ref(false);
//控制编辑信息窗口
const editWinVisible=ref(false);
//新增数据绑定对象
const addObject=ref({number: '',
  type: '',
  rate: '',
  status: ''
});



//记录修改数据的下标
var editIndex=-1;
const checkObj=ref({
  page:1,
  size:12
});
const total=ref(90);
//分页绑定对象
// const pageObj=ref({
//   size:20,
//   page:1
// })
//查询数据的文本
//挂载页面时查询数据
onMounted(async function(){
  checkDate();
});
const delObject=ref({});

const del=function(index,row){
  ElMessageBox.confirm(
'确定要禁用吗？',
'提示框',
{
confirmButtonText:"确认",
cancelButtonText:"取消",
type:'warning',
}
  ).then(async function(){
    delObject.value.number=row.number;
    delObject.value.status="已禁用";
    //提交数据
    let result =await easyapi.putJson("/api/norooms",delObject.value);
    //刷新表单数据
    tableData.value[index].status="已禁用";
    if(result.code==200){
    //提示删除成功
    ElMessage({
        type: 'success',
        message: '禁用成功',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '禁用失败',
      })
    }
  })
}
//
const delR=function(index,row){
  ElMessageBox.confirm(
'确定要入住吗？',
'提示框',
{
confirmButtonText:"确认",
cancelButtonText:"取消",
type:'warning',
}
  ).then(async function(){
    delObject.value.re_status="预定完成";
    delObject.value.number=row.number;
    delObject.value.status="已入住";
    //提交数据
    let result =await easyapi.putForm("/api/rooms_check",delObject.value);
    //刷新表单数据
    tableData.value[index].re_status="预定完成";
    tableData.value[index].status="已入住";
    if(result.code==200){
      console.log=result;
    //提示删除成功
    ElMessage({
        type: 'success',
        message: '入住成功',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '入住失败',
      })
    }
  })
}
//显示窗口
const openAddWin=()=>{
  addObject.value={};
  addWinVisible.value=true;
}
const closeAddWin=()=>{
  addWinVisible.value=false;
} 
//保存新增数据  addObject
const addSave=async function(){
  console.log(addObject);
  //发送请求
  // easyapi.postForm('/api/staff',addObject.value);
  let result=await easyapi.postJson('/api/roomsjson',addObject.value);
  //表格数据变更
  tableData.value.unshift(result.data);
  ElMessage({
        type: 'success',
        message: '保存成功',
      })
  //提示
  closeAddWin();
}

//点击编辑按钮执行的方法
const edit=async function(index,row){
  //记录数该数据的下标
  editIndex=index;
  //绑定要修改的数据
  editObject.value.id=row.id;
  editObject.value.number=row.number;
  editObject.value.type=row.type;
  editObject.value.price=row.price;
  // editObject.value.rate=row.rate;
  editObject.value.status=row.status;
  //打开对话框
  editWinVisible.value=true;
}
//保存修改编辑数据
const editSave=async function(){
  //发送请求
  let result=await easyapi.putJson("/api/roomsjson",editObject.value); 
  if(result.code==200){
    //刷新表格
  // tableData.value[editIndex]=result.data;
  // tableData.value[editIndex].status=result.status;
  tableData.value[editIndex].status = result.data.status;
  //提示
  ElMessage({
        type: 'success',
        message: '保存成功',
      });
    editWinVisible.value=false;
  }
  
}
// const changePage=function(val){
// //val就是点击的页码
// pageObj.value.page=val;

// }
const checkDate=async function(val){
  if(typeof val=='number'){
    checkObj.value.page=val;
  }
  //查询数据
  let result = await easyapi.getSearch("/api/searchrooms",checkObj.value);
  result.data.list.forEach(searchrooms => {
    // 确保 type 和 price 已经被设置
    if (searchrooms.type && searchrooms.price) {
      // searchrooms.price=searchrooms.type.price;
      // // console.log(searchrooms.type);
      // console.log(searchrooms.type.price);
      // console.log(searchrooms.type, searchrooms.price);
    } else {
      console.log('Missing type or price for:', searchrooms);
    }
  });
  //result现在返回的数据 {code,data,message}   data-->{list,count}
  //更新表格数据中的数据
tableData.value=result.data.list;
total.value=result.data.count;
}

//编辑数据绑定对象
const editObject = ref({
  number: '',
  // type: '',
  // price: '',
  status: ''
});
// const rates = ref([220, 280,300,350]);
// const types=ref(['双人间','大床房','电竞房']);
const statuses=ref(['已预定','已入住','空闲']);

</script>
    <template>
    <el-input v-model="checkObj.number" style="width: 150px" placeholder="请输入查询的房间号" clearable/>
        <el-input v-model="checkObj.type" style="width: 150px" placeholder="请输入查询的类型" clearable/>
        <el-input v-model="checkObj.status" style="width: 150px" placeholder="请选择查询的状态" clearable/>
        <el-button type="success" @click="checkDate">查询</el-button>
        <!-- <el-button type="success" @click="openAddWin">新增</el-button> -->
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <!-- <el-table-column prop="id" label="ID" width="180" /> -->
    <el-table-column prop="number" label="房间号" width="180"/>
    <el-table-column prop="type" label="类型">
            <template #default="{ row }">{{ row.type }}</template>
          </el-table-column>
          <el-table-column prop="price" label="价格">
            <template #default="{ row }">{{ row.price }}</template>
          </el-table-column>
    <el-table-column prop="status" label="状态"  />
    <el-table-column label="操作">
      <template #default="scope">
        <!-- <el-button type="warning" v-if="scope.row.status == '已预定'" @click="delR(scope.$index,scope.row)">入住</el-button> -->
        <el-button type="primary" @click="edit(scope.$index,scope.row)">更改房间信息</el-button>
        <el-button type="danger" v-if="scope.row.status !== '已入住'&&scope.row.status !== '已预定'&&scope.row.status !== '已禁用'" @click="del(scope.$index,scope.row)">禁用</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--current-page分页组件初始显示的页码 size每页的条数  -->
  <el-pagination 
  :page-size="checkObj.size"
  :current-page="checkObj.page"
  background layout="prev, pager, next" :total="total" @current-change="checkDate"/>

  <!-- 编辑信息弹出框 -->
  <el-dialog v-model="editWinVisible" title="修改" width="500">
      <el-form :model="editObject">
        <!-- <el-form-item label="房间类型" label-width="80">
      <el-select v-model="editObject.type" placeholder="请选择类型" clearable>
        <el-option v-for="type in types" :key="type" :label="type" :value="type" />
      </el-select>
    </el-form-item> -->
      <!-- <el-form-item label="房间单价" label-width="80">
      <el-select v-model="editObject.rate" placeholder="请选择价格" clearable>
        <el-option v-for="rate in rates" :key="rate" :label="rate" :value="rate" />
      </el-select>
    </el-form-item> -->
    <el-form-item label="房间状态" label-width="80">
      <el-select v-model="editObject.status" placeholder="请设置房间状态" clearable>
        <el-option v-for="status in statuses" :key="status" :label="status" :value="status" />
      </el-select>
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editWinVisible = false">取消</el-button>
        <el-button type="primary" @click="editSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- end编辑 -->

<!-- 添加信息弹出框 -->
  <el-dialog v-model="addWinVisible" title="修改" width="500">
      <el-form :model="addObject">
        <el-form-item label="房间号" label-width="80">
        <el-input v-model="addObject.number" autocomplete="off" placeholder="请填写房间号" clearable/>
      </el-form-item>
        <el-form-item label="房间类型" label-width="80">
      <el-select v-model="addObject.type" placeholder="请选择类型" clearable>
        <el-option v-for="type in types" :key="type" :label="type" :value="type" />
      </el-select>
    </el-form-item>
      <el-form-item label="房间单价" label-width="80">
      <el-select v-model="addObject.rate" placeholder="请选择价格" clearable>
        <el-option v-for="rate in rates" :key="rate" :label="rate" :value="rate" />
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="房间状态" label-width="80">
      <el-select v-model="addObject.status" placeholder="请设置房间状态" clearable>
        <el-option v-for="status in statuses" :key="status" :label="status" :value="status" />
      </el-select>
    </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addWinVisible = false">取消</el-button>
        <el-button type="primary" @click="addSave">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- end添加 -->

</template>
<style>
</style>
